<template>
  <div class="chart_body">
    <div class="table">
      <div class="head flex">
        <div class="item head_empty1"></div>
        <div class="item head_item status_lower_colors flex-center-center">
          {{ i18n.t('lower_standard') }}
        </div>
        <div class="item head_item status_standard_colors flex-center-center">
          {{ i18n.t('standard') }}
        </div>
        <div class="item head_item status_higher_colors flex-center-center">
          {{ i18n.t('higher_standard') }}
        </div>
        <div class="item head_empty2"></div>
      </div>
      <div class="left_chart" v-for="item in pickReports" :key="item.id">
        <div class="item left_chart_name align-items-center">
          {{ item.name }}
        </div>
        <div class="item left_chart_main align-items-center">
          <div
            class="left_chart_bar"
            v-for="(level, index) in item.levels"
            :key="level.color"
            :style="{
              background: level.color,
              width:
                index < item.levelIndex
                  ? '33.33%'
                  : index === item.levelIndex
                  ? minLevelProcess(item.levelProgress) + '%'
                  : 0,
            }"
          ></div>
        </div>
        <div class="item left_chart_value">
          <p>
            {{ item.value }}
          </p>
          <p class="item_unit">({{ item.unit }})</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Mixins, Prop } from 'vue-property-decorator'
import ReportCard from './reportCard/index.vue'

import { calcUnitValue, calcUnit } from '@/assets/ts/eight_electrodes_report/Util'
import getMeasureData,{ consts } from '@yolanda-qn/eight-electrodes-report-lib'
import { TypedScaleData, TypedConfig } from '@yolanda-qn/eight-electrodes-report-lib/dist/types/src/typings'

@Component({ components: { ReportCard } })
export default class extends Mixins() {
  @Prop() measureData!: TypedScaleData
  @Prop() weight_unit!: consts.WeightUnitEnum
  @Prop() config!: TypedConfig

  pickReports:Record<string, any>[] = []
  calcUnitValue: Function = calcUnitValue
  calcUnit: Function = calcUnit
  getReportDetail() {
    const ReportIdsMapping = consts.ReportBuilderIdsEnum
    const pickReports = getMeasureData(this.measureData, {
      ...this.config,
      builderIds:[
        ReportIdsMapping.ProteinMass,
        ReportIdsMapping.Bone,
        ReportIdsMapping.BodyfatMass,
        ReportIdsMapping.WaterMass,
      ]
    }).map(item => item.toObject())
    this.pickReports = pickReports
  }
  mounted() {
    this.getReportDetail()
  }

  // 小于最小值则显示5%，这样至少会显示一个进度，对于用户来说视觉上会好看点
  minLevelProcess(levelProcess: number) {
    if (levelProcess <= 0) {
      return 5;
    }

    return levelProcess;
  }
}
</script>

<style lang="scss" scoped>
@import '@/assets/scss/main.scss';
@import '../index.scss';
.chart_body {
  margin-top: rem(20);
}
.table {
  background-color: $primaryBg;
  .item {
    border: rem(2) solid #fff;
  }
  .head {
    .head_empty1 {
      width: rem(171);
    }
    .head_item {
      flex: 1;
      text-align: center;
      line-height: rem(23);
      font-size: rem(22);
      font-weight: 500;
      padding: rem(10) 0;
    }
    .head_empty2 {
      width: rem(123);
    }
  }
  .left_chart {
    display: flex;
    .left_chart_name {
      width: rem(171);
      font-size: rem(22);
      color: #2a2e31;
      padding-left: rem(12);
      word-break: break-all;
    }
    .left_chart_main {
      flex: 1;
      .left_chart_bar {
        height: rem(12);
      }
    }
  }
  .left_chart_value {
    width: rem(123);
    font-size: rem(24);
    color: #303133;
    text-align: center;
    padding: rem(6) 0;
    .item_unit {
      color: #909090;
    }
  }
}
</style>
